<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>编辑章节</title>
		<!-- 引入 Vue.js 和 Element UI 的脚本 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
		<!-- 引入 Element UI 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

		<link href="css/index.css" rel="stylesheet" type="text/css"/>
		<link href="css/ranking.css" rel="stylesheet" type="text/css"/>
		<link href="css/author.css" rel="stylesheet" type="text/css"/>
		<link href="css/edit.css" rel="stylesheet" type="text/css"/>

		<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

	</head>
	<body>
		
		<div id=app>
			<div class="td-header" :class="{ 'is-sticky': isSticky }">
				<div class="td-header-content">
					<div class="td-header-logo">
						<img src="image/logo.png" />
						<li> 土豆小说网 </li>
					</div>
					<div class="td-header-right">
						<div class="right-shouye">
							<a href="#">消息通知</a>

						</div>


						 <div class="serial-divider  byte-divider byte-divider-vertical" style="margin-right: 40px;"></div>
						 <div class="right-user">
							 <div     style="display: flex; align-items: center;cursor: pointer;"  >
								 <span  style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px; ">{{this.author.authorName}} </span>
							 </div>
							 <div   style="display: flex; align-items: center;">
								 <span    class="user-logout" @click="logout()" style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px;cursor: pointer; ">退出 </span>
							 </div>
							 
						 </div>
	 		 
					</div>
				</div>
			</div>
			<div class="rank">
				<div class="rank-main">
					 <div class="rank">
						 <div class="rank-title">
							 <header class="muye-rank-wrap-header" style="margin-bottom: 20px;margin-top: 20px;">
								 <div @click="ret()" class="xiahuaxian" style="margin-left: 10%; cursor: pointer;">
									 <h1><{{novel.title}}</h1>
								 </div>
							 </header>
							 <div class="rank-chaptertitle">
								 <el-input
										 type="text"
										 placeholder="请输入标题"
										 v-model="chapter.chapterTitle"
										 maxlength="30"
										 show-word-limit>
								 </el-input>

							 </div>
							 <div class="rank-content">
<!--								 章节内容-->
								 <div ref="editor"></div>

								 <button  v-if="!isChapter" @click="saveChapter" style=" margin-bottom: 20px;width: 150px;height: 50px;background-color: orange;color: white;border: none;border-radius: 10px;margin-top: 20px;">发布章节</button>
								 <button  v-if="isChapter" @click="upChapter" style=" margin-bottom: 20px;width: 150px;height: 50px;background-color: orange;color: white;border: none;border-radius: 10px;margin-top: 20px;">修改章节</button>

							 </div>

						 </div>

					</div>
				</div>
			</div>
			<div class="reader-toobar">

				<div class="reader-toolbar-item" @click="drawer = true">
					<svg class="muyeicon-icon muyeicon-icon-chapter-menu reader-toolbar-item-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M4.5 5.75C4.5 4.50736 5.50736 3.5 6.75 3.5H17.25C18.4926 3.5 19.5 4.50736 19.5 5.75V18.25C19.5 19.4926 18.4926 20.5 17.25 20.5H6.75C5.50736 20.5 4.5 19.4926 4.5 18.25V5.75Z" stroke="#252525" stroke-width="1.5"></path>
						<path fill-rule="evenodd" clip-rule="evenodd" d="M8.31738 8.75831C8.31738 8.17312 8.7595 7.91016 9.15259 7.91016L14.9997 8.16598C15.9177 8.16598 15.9177 9.5 14.9997 9.5L9.15259 9.60916C8.7595 9.60916 8.31738 9.34351 8.31738 8.75831zM8.31738 12.6436C8.31738 12.0584 8.7595 11.7954 9.15259 11.7954L13.4997 12C14.4177 12 14.4177 13.3212 13.4997 13.3212L9.15259 13.4944C8.7595 13.4944 8.31738 13.2288 8.31738 12.6436z" fill="#252525"></path>
					</svg>
					<div>目录</div>
				</div>

			</div>

			<el-drawer
					:title="chapter.title"
					:visible.sync="drawer"
					direction="rtl"
					 >
				<el-table
						:data="tableData"
						stripe
						style="width: 100%"
						@row-click="handleRowClick"
						:row-key="row => row.chapterTitle">
					<el-table-column
							prop="chapterTitle"
							label="章节标题"
							width="300">
					</el-table-column>
					<el-table-column
							prop="publishDate"
							label="发布时间"
							width="150">
					</el-table-column>

				</el-table>
			</el-drawer>
			<div class="td-footer">
				  <p>Company Name</p>
				 <p>Address: 123 Street, City, Country</p>
				 <p>Email: info@example.com</p>
			</div>
		</div>
	</body>


	<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
	<script>
	 
	 
	
	var v = new Vue({
		el : "#app",
		data() {
			  
		 
			 return {
				  
				   
				  isSticky: false,
				  author_name: 'lisi',
				  category: '悬疑脑洞',
				  title: '夜幕之下',
				 author: {
					 authorId: '',
					 authorName: '',
					 motto: '',
					 aPhone: '',

				 },
				 editor: null,
				 existingContent: "",//用于存储已存在的章节内容，以便在加载现有内容时使用
				 chapter:{
					  chapterId: '',
					 novelId: '',
					  chapterTitle: '',
					  content: '',
					 publishDate:  new Date(),
					 count: '',
				 },
				 novel: {
					  novelId: '',
					 title: '',
				 },
				 drawer: false,//侧边栏
				 tableData: [{
					 chapterId: '1',
					 chapterTitle: '第一章 序章',
					 content: '',
					 publishDate: '2021-01-01',

				 } ],
				 isChapter: false,


			 };
			},
	    mounted() {
			window.addEventListener('scroll', this.handleScroll);
			this.editor = new Quill(this.$refs.editor, {
				theme: 'snow'
			});
			this.loadExistingContent();

			// 获取 URL 中的参数值（以 # 号分隔）
			let hashValue = window.location.hash;

			// 去掉 # 号，只保留值部分
			this.novel.novelId  = hashValue.substring(1);

			this.iflogin();
			this.getNovel();
			this.showCatalog(); //显示目录


		},
		methods: {
			handleScroll() {
				const scrollHeight = window.scrollY || document.documentElement.scrollTop;
				const threshold = 50;
	
				this.isSticky = scrollHeight > threshold;
			},


			onSubmit() {


			},
			iflogin(){
				axios.get('/other/author/iflogin').then(res=>{

					if(res.data != ""){
						this.author.authorId = res.data;
						axios.get('/other/author/getAuthor?authorId='+this.author.authorId).then(res=>{
							this.author = res.data;
						});
					}
				});


			},
			logout(){
				axios.post('/other/author/logout').then(res=>{

					window.location.href = "/index/login.html";
				});
			},
			saveChapter() {
				this.chapter.content = this.editor.root.innerText; // Get chapter content as HTML

				this.chapter.novelId = this.novel.novelId;
				this.wordCount();


				 axios.post('/other/insertChapter', this.chapter).then(res=>{
					 if (res.data == 1){
						 alert("章节发布成功！");
						 this.showCatalog(); //刷新目录
						 this.chapter.chapterTitle = "";
						 this.editor.root.innerText = "";
					 }
					 else{
						 alert("章节发布失败！");
					 }

				 });

			},
			loadExistingContent() {

				setTimeout(() => {
					this.editor.root.innerHTML = this.existingContent;
				}, 1000);
			},

			getNovel(){
				axios.get('/other/novel/selectnovelId?novelId='+this.novel.novelId).then(res=>{
					this.novel.title = res.data;

				});
			},
			//计算字数
			wordCount() {
				// 使用正则表达式匹配单词数（这里简单地根据空格切分）
				const reg = /[\u4e00-\u9fa5]/g;
				if (this.chapter.content.trim() === '') {
					this.chapter.count = 0;
				} else {
					const matches = this.chapter.content.trim().match(reg);
					if(matches == null){
						this.chapter.count = 0;
					}
					else {
						this.chapter.count = matches.length;
					}
				}
			},
			ret(){
				window.location.href = "/index/author.html";
			},
			//显示目录
			showCatalog() {
				axios.get('/other/selectChapter?novelId=' + this.novel.novelId).then(res => {
					this.tableData = res.data;

				});


			},
			// 点击目录跳转到指定章节
			handleRowClick(row,event,column) {

				this.isChapter = true;

				this.chapter.chapterTitle = row.chapterTitle;
				this.editor.root.innerText = row.content;
				this.chapter.chapterId = row.chapterId;

			},
			upChapter() {
				this.chapter.content = this.editor.root.innerText; // Get chapter content as HTML

				this.chapter.novelId = this.novel.novelId;
				this.wordCount();
				axios.post('/other/updateChapter', this.chapter).then(res => {
					if(res.data == 1){
						alert("章节修改成功！");
					}
					else{

						alert("章节修改失败！");
					}
				});
			}


		}
		 
		 
		 
	})
	 
	</script>
</html>
